<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height:252px;">
                    <div class="user-info">
                        <img src="../../assets/img/photo.jpg" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{name}}</div>
                            <div>{{roleName}}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        上次登录时间：
                        <span>2024-7-1</span>
                    </div>
                    <div class="user-info-list">
                        上次登录地点：
                        <span>太原市</span>
                    </div>
                </el-card>

                <el-card shadow="hover" style="height:400px;">
                    <div ref="mains" style="width: 100%;height: 300px"></div>
                </el-card>


            </el-col>


            <el-col :span="16">
                <div class='box'>
                    <el-descriptions title="个人信息" direction="horizontal" :column="2" border style='width: 800px;'>

                        <el-descriptions-item label="用户名" >{{name}}</el-descriptions-item>

                        <el-descriptions-item :span='2' label="一寸照片">
                            <img src="../../assets/img/photo.jpg" style="width: 100px; height: 100px; border: 1px solid #ccc;" />
                        </el-descriptions-item>
                        <el-descriptions-item label="手机号">{{tableData.phoneNumber}}</el-descriptions-item>
<!--                        <el-descriptions-item label="邮箱号">-->
<!--                            <el-tag size="small">2018904116@qq.com</el-tag>-->
<!--                        </el-descriptions-item>-->
<!--                        <el-descriptions-item label="身份证号">140821200212240042</el-descriptions-item>-->
                        <el-descriptions-item label="密码">******** <i class="el-icon-view" @click="togglePasswordVisibility"></i></el-descriptions-item>
                        <el-descriptions-item label="角色">律师</el-descriptions-item>
<!--                        <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>-->
                        <el-descriptions-item label="管理"><el-button @click='editVisible = true'>修改信息</el-button></el-descriptions-item>
                    </el-descriptions>

                </div>
                <div style='margin-top:28px;width: 800px;'>
                    <el-card shadow="hover" style="height:400px; ">
                        <div ref="main2"  style="width: 100%;height: 300px"></div>
                    </el-card>
                </div>


            </el-col>



        </el-row>


        <el-dialog title="修改个人信息" :visible.sync="editVisible" width="40%">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">

                <el-form-item label="用户名" prop='userName'>
                    <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop='phoneNumber'>
                    <el-input v-model="form.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop='newPassword'>
                    <el-input type="password" v-model="form.password"  @blur='validPass'></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop='confirmNewPassword'>
                    <el-input type="password" v-model="form.confirmNewPassword" @blur='validPass'></el-input>
                </el-form-item>
                <el-alert
                    v-if="passwordNotMatch"
                    @close='!passwordNotMatch'
                    title="两次密码不一样"
                    type="error"
                    center
                    show-icon>
                </el-alert>
            </el-form>
            <span slot="footer" class="dialog-footer">
      <el-button @click="editVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveEdit">确 定</el-button>
    </span>
        </el-dialog>
    </div>

</template>
<script>
import * as echarts from 'echarts';
import { getRoleName } from '@/api/role';
import { editUser, editUserinfo, getUserByName } from '@/api/user';
let user = JSON.parse(localStorage.getItem('ms_username'));
export default {
    name: 'userInfo',
    data() {
        return {

            showPassword: false,
            password:"*****",
            chartInstance: null,
            name:user.userName,
            roleName:"",
            tableData:{},
            query:{
                name,
            },

            passwordNotMatch: false,
            form:{
                userId:"",
                userName: '',
                phoneNumber: '',
                password: '',
                confirmNewPassword: ''
            },
            editVisible:false,
            rules:{
                userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                phoneNumber:[ { required: true, message: '请输入手机号', trigger: 'blur' },
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入有效的手机号码',
                        trigger: 'blur'
                    }],
                roleId:[{ required: true, message: '请选择角色', trigger: 'change'}]
            },

        }
    },
    created() {
        getRoleName(user.userId).then(res=>{
            console.log(res);
            if(res.code==200) {
                this.roleName = res.data
            }
        })
        this.getData();

    },
    mounted() {
        this.initEcharts()
    },
    methods: {
        //密码比对
        validPass() {
            if (this.form.password!== this.form.confirmNewPassword) {
                this.passwordNotMatch = true;
            } else {
                this.passwordNotMatch = false;
            }
        },
        saveEdit() {
            this.form.userId=this.tableData.userId
            this.form.confirmNewPassword = null;
            editUserinfo(this.form).then(res=>{
                console.log(this.form);
                console.log("修改用户返回的",res);
                if(res.code==200) {
                    this.$message.success("修改成功")
                    this.editVisible = false;
                    this.getRoleName();
                    this.getData();
                }else {
                    this.$message.error("修改失败")
                }

            })
        },
        getData() {
            getUserByName(this.name).then(res=>{
                console.log(res);
                    this.tableData = res.data;
            })
        },
        initEcharts() {
            this.chartInstance = this.$echarts.init(this.$refs.mains);
            this. chartInstance2= this.$echarts.init(this.$refs.main2)
            const option = {
                legend: {
                    data: ['擅长程度', '代理案件数'],
                },
                radar: {
                    // shape: 'circle',
                    indicator: [
                        { name: '刑事案件', max: 6500 },
                        { name: '民事案件', max: 16000 },
                        { name: '经济纠纷', max: 30000 },
                        { name: '行政案件', max: 38000 },
                        { name: '知识产权', max: 52000 },
                        { name: '劳动', max: 25000 }
                    ]
                },
                series: [
                    {
                        name: 'Budget vs spending',
                        type: 'radar',
                        data: [
                            {
                                value: [4200, 3000, 20000, 35000, 50000, 18000],
                                name: '擅长程度'
                            },
                            {
                                value: [5000, 14000, 28000, 26000, 42000, 21000],
                                name: '代理案件数'
                            },
                        ]
                    }
                ]
            };
            const option2 = {
                title: {
                    text: '个人信息统计图表'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['案件处理数量', '客户满意度', '工作时长']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['律师', '行政管理员', '律所主任']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '案件处理数量',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus:'series'
                        },
                        data: [50, 30, 20]
                    },
                    {
                        name: '客户满意度',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus:'series'
                        },
                        data: [80, 70, 90]
                    },
                    {
                        name: '工作时长',
                        type: 'line',
                        stack: 'Total',
                        areaStyle: {},
                        emphasis: {
                            focus:'series'
                        },
                        data: [40, 35, 50]
                    }
                ]
            }

            this.chartInstance2.setOption(option2)

            this.chartInstance.setOption(option)

        },
        togglePasswordVisibility() {
            this.password = 123456
        },
    }
};
</script>

<style scoped>
i:hover {
    cursor: pointer;

}

.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>